<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册新账户-柚聊</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/register.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body>

<!-- 加载动画 -->
<div class="loading-screen" id="loadingScreen">
    <div class="loader"></div>
    <div class="loading-text">注册页面加载中,请稍等片刻...</div>
</div>


<!--导航栏-->
<div class="nav">
    <div class="nav-brand">
        <svg t="1762146198299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10957" width="200" height="200"><path d="M897.024 403.456c43.008 22.528 71.68 65.536 71.68 114.688v206.848c0 71.68-59.392 129.024-135.168 129.024h-4.096V962.56L634.88 854.016h-92.16c-30.72 0-61.44-10.24-83.968-28.672L542.72 768H716.8c92.16 0 176.128-67.584 176.128-176.128V403.456h4.096z" fill="#DAE9FF" p-id="10958"></path><path d="M270.336 720.896h-59.392c-71.68 0-131.072-59.392-131.072-131.072v-337.92c0-71.68 59.392-131.072 131.072-131.072h499.712c71.68 0 131.072 59.392 131.072 131.072v339.968c0 71.68-57.344 131.072-131.072 131.072H532.48" fill="#FFFFFF" p-id="10959"></path><path d="M245.76 245.76h430.08c22.528 0 40.96 18.432 40.96 40.96v286.72c0 22.528-18.432 40.96-40.96 40.96H245.76c-22.528 0-40.96-18.432-40.96-40.96V286.72c0-22.528 18.432-40.96 40.96-40.96z" fill="#DAE9FF" p-id="10960"></path><path d="M378.88 389.12c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72 30.72 14.336 30.72 30.72-14.336 30.72-30.72 30.72z m143.36 0c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72 30.72 14.336 30.72 30.72-14.336 30.72-30.72 30.72z m-133.12 81.92c0-12.288 8.192-20.48 20.48-20.48s20.48 8.192 20.48 20.48 8.192 20.48 20.48 20.48 20.48-8.192 20.48-20.48 8.192-20.48 20.48-20.48S512 458.752 512 471.04c0 34.816-26.624 61.44-61.44 61.44s-61.44-26.624-61.44-61.44z" fill="#3988FF" p-id="10961"></path><path d="M710.656 120.832H210.944c-71.68 0-131.072 59.392-131.072 131.072v339.968c0 71.68 59.392 131.072 131.072 131.072h100.352v-61.44h-98.304c-38.912 0-69.632-30.72-69.632-69.632V251.904c0-38.912 30.72-69.632 69.632-69.632h499.712c38.912 0 69.632 30.72 69.632 69.632v339.968c0 38.912-30.72 69.632-69.632 69.632h-194.56l-157.696 102.4-36.864 24.576 32.768 49.152L532.48 722.944h178.176c71.68 0 131.072-59.392 131.072-131.072V251.904c0-71.68-59.392-131.072-131.072-131.072z" fill="#3889FF" p-id="10962">
        </path>
      </svg>
        柚聊
    </div>
    <ul class="nav-menu">
        <li><a href="login.html"><i class="fas fa-sign-in-alt"></i> 登录</a></li>
        <li><a href="help.html" id="help-link"><i class="fas fa-question-circle"></i> 帮助</a></li>
        <li><a href="about.html" id="about-link"><i class="fas fa-info-circle"></i> 关于聊天室</a></li>
    </ul>
</div>

  <!--注册表单-->
  <div class="register-container" id="registerContainer">
    <div class="register-dialog">
      <h1><i class="fas fa-user-plus"></i> 注册新账户</h1>
      
      <form id="register-form">
        <div class="row">
          <label for="username"><i class="fas fa-user"></i> 用户名</label>
          <input type="text" id="username" placeholder="请输入用户名">
          <div class="hint"><i class="fas fa-info-circle"></i> 用户名不可与已有用户重复</div>
          <div class="error-message" id="username-error"><i class="fas fa-exclamation-circle"></i> 用户名不能为空</div>
        </div>
        
        <div class="row">
          <label for="password"><i class="fas fa-lock"></i> 密码</label>
          <input type="password" id="password" placeholder="请输入密码">
          <div class="hint"><i class="fas fa-info-circle"></i> 密码长度至少为6个字符</div>
          <div class="error-message" id="password-error"><i class="fas fa-exclamation-circle"></i> 密码不符合要求</div>
        </div>
        
        <div class="row">
          <label for="confirm-password"><i class="fas fa-lock"></i> 确认密码</label>
          <input type="password" id="confirm-password" placeholder="请再次输入密码">
          <div class="hint"><i class="fas fa-info-circle"></i> 密码应与上次输入密码相同</div>
          <div class="error-message" id="confirm-password-error"><i class="fas fa-exclamation-circle"></i> 两次输入的密码不一致</div>
        </div>
        
        <!-- 新增密保问题部分 -->
        <div class="row">
          <label for="security-question"><i class="fas fa-shield-alt"></i> 密保问题</label>
          <select id="security-question">
            <option value="">请选择密保问题</option>
            <option value="您的小学校名是什么？">您的小学校名是什么？</option>
            <option value="您的出生地是哪里？">您的出生地是哪里？</option>
            <option value="您的第一个宠物叫什么名字？">您的第一个宠物叫什么名字？</option>
            <option value="您母亲的姓氏是什么？">您母亲的姓氏是什么？</option>
            <option value="您父亲的生日是哪天？">您父亲的生日是哪天？</option>
            <option value="您最尊敬的老师是谁？">您最尊敬的老师是谁？</option>
            <option value="您的童年绰号是什么？">您的童年绰号是什么？</option>
            <option value="您最喜欢的一部电影是什么？">您最喜欢的一部电影是什么？</option>
          </select>
          <div class="hint"><i class="fas fa-info-circle"></i> 请选择一个密保问题，用于找回密码</div>
          <div class="error-message" id="security-question-error"><i class="fas fa-exclamation-circle"></i> 请选择密保问题</div>
        </div>
        
        <div class="row">
          <label for="security-answer"><i class="fas fa-key"></i> 密保答案</label>
          <input type="text" id="security-answer" placeholder="请输入密保答案">
          <div class="hint"><i class="fas fa-info-circle"></i> 请记住您的密保答案</div>
          <div class="error-message" id="security-answer-error"><i class="fas fa-exclamation-circle"></i> 密保答案不能为空</div>
        </div>
        
        <div class="row">
          <button type="button" id="submit"><i class="fas fa-user-plus"></i> 注册</button>
        </div>
      </form>
      
      
      <a href="login.html" class="back-link"><i class="fas fa-arrow-left"></i> 返回登录页面</a>
    </div>
  </div>

  <!--引入jquery-->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  
  <script>
    $(document).ready(function() {
      // 页面加载完成后隐藏加载动画，显示注册表单
      setTimeout(function() {
        $('#loadingScreen').addClass('hidden');
        $('#registerContainer').addClass('visible');
      }, 2000); // 2秒后显示注册页面

      // 注册按钮点击事件
      $('#submit').click(function() {
        const username = $('#username').val();
        const password = $('#password').val();
        const confirmPassword = $('#confirm-password').val();
        const securityQuestion = $('#security-question').val();
        const securityAnswer = $('#security-answer').val();
        
        // 重置错误状态
        $('.error-message').hide();
        $('input, select').removeClass('error');
        
        let isValid = true;
        
        // 验证用户名
        if(username === '') {
          $('#username-error').text('用户名不能为空').show();
          $('#username').addClass('error');
          isValid = false;
        }
        
        // 验证密码
        if(password.length < 6) {
          $('#password-error').text('密码长度至少为6个字符').show();
          $('#password').addClass('error');
          isValid = false;
        }
        
        // 验证确认密码
        if(password !== confirmPassword) {
          $('#confirm-password-error').text('两次输入的密码不一致').show();
          $('#confirm-password').addClass('error');
          isValid = false;
        }
        
        // 验证密保问题
        if(securityQuestion === '') {
          $('#security-question-error').text('请选择密保问题').show();
          $('#security-question').addClass('error');
          isValid = false;
        }
        
        // 验证密保答案
        if(securityAnswer === '') {
          $('#security-answer-error').text('密保答案不能为空').show();
          $('#security-answer').addClass('error');
          isValid = false;
        }
        
        if(isValid) {
          // 显示加载状态
          $('#submit').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> 注册中...');
          
          // 发送注册请求到后端
          $.ajax({
            url: '/register',
            type: 'post',
            data: {
              username: username,
              password: password,
              confirmPassword: confirmPassword,
              securityQuestion: securityQuestion,
              securityAnswer: securityAnswer
            },
            success: function(response) {
              // 恢复按钮状态
              $('#submit').prop('disabled', false).html('<i class="fas fa-user-plus"></i> 注册');
              
              if(response.success) {
                // 注册成功
                showMessage('success', response.message || '注册成功！');
                setTimeout(function() {
                  window.location.href = 'login.html';
                }, 1500);
              } else {
                // 注册失败，显示具体错误信息
                let errorMessage = response.message || "注册失败，请稍后重试";
                
                // 根据错误类型显示不同的提示
                if (errorMessage.includes('两次输入的密码不一致')) {
                  $('#confirm-password-error').text('两次输入的密码不一致').show();
                  $('#confirm-password').addClass('error');
                  showMessage('error', '两次输入的密码不一致，请重新输入');
                } else if (errorMessage.includes('密码长度至少为6字符')) {
                  $('#password-error').text('密码长度至少为6个字符').show();
                  $('#password').addClass('error');
                  showMessage('error', '密码长度至少为6个字符');
                } else if (errorMessage.includes('用户名已存在')) {
                  $('#username-error').text('用户名已存在').show();
                  $('#username').addClass('error');
                  showMessage('error', '用户名已存在，请选择其他用户名');
                } else {
                  showMessage('error', errorMessage);
                }
              }
            },
            error: function(xhr, status, error) {
              // 恢复按钮状态
              $('#submit').prop('disabled', false).html('<i class="fas fa-user-plus"></i> 注册');
              
              console.error("注册请求错误:", error);
              showMessage('error', '注册请求失败，请检查网络连接或稍后重试');
            }
          });
        }
      });

      // 自定义消息提示函数
      function showMessage(type, message) {
        // 移除可能已存在的消息
        $('.custom-message').remove();
        
        // 创建消息元素
        const messageEl = $('<div class="custom-message"></div>')
          .text(message)
          .addClass(type === 'success' ? 'success-message' : 'error-message');
        
        // 添加到页面
        $('body').append(messageEl);
        
        // 显示消息
        setTimeout(function() {
          messageEl.addClass('show');
        }, 10);
        
        // 自动隐藏消息
        setTimeout(function() {
          messageEl.removeClass('show');
          setTimeout(function() {
            messageEl.remove();
          }, 300);
        }, 4000);
      }

      // 输入时清除错误状态
      $('#username, #password, #confirm-password, #security-answer').on('input', function() {
        $(this).removeClass('error');
        $(this).siblings('.error-message').hide();
      });
      
      // 选择密保问题时清除错误状态
      $('#security-question').on('change', function() {
        $(this).removeClass('error');
        $(this).siblings('.error-message').hide();
      });
    });
  </script>
</body>
</html>